<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog'
import {useDisplayStore} from '@/stores'
import {ref,onBeforeMount} from 'vue'

import {ElMessage} from 'element-plus'

const displayStore = useDisplayStore()

const formQiniu = ref({
  serverUrl: "",
  account: "",
  password: "",
})

onBeforeMount(() => {
  if (localStorage.getItem(`backUpConfig`)) {
    formQiniu.value = JSON.parse(localStorage.getItem(`backUpConfig`)!)
  }
})

function saveQiniuConfiguration() {
  if (
    !(
      formQiniu.value.serverUrl
      && formQiniu.value.account
      && formQiniu.value.password
    )
  ) {
    ElMessage.error(`参数配置不全`)
    return
  }
  localStorage.setItem(`backUpConfig`, JSON.stringify(formQiniu.value))
  ElMessage.success(`保存成功`)
}

</script>

<template>
  <Dialog v-model:open="displayStore.isShowBackUpDialog">
    <DialogContent class="max-w-max">
      <DialogHeader>
        <DialogTitle>备份服务器配置</DialogTitle>
      </DialogHeader>
      <el-form
        class="setting-form"
        label-position="right"
        label-width="150px"
      >
        <el-form-item label="服务器地址" :required="true">
          <el-input
            v-model.trim="formQiniu.serverUrl"
            placeholder="如：http://192.168.0.1:8080"
          />
        </el-form-item>
        <el-form-item label="账号" :required="true">
          <el-input
            v-model.trim="formQiniu.account"
            placeholder="如：admin"
          />
        </el-form-item>
        <el-form-item label="密码" :required="true">
          <el-input
            v-model.trim="formQiniu.password"
            placeholder="如：123456"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveQiniuConfiguration">
            保存配置
          </el-button>
        </el-form-item>
      </el-form>
    </DialogContent>
  </Dialog>
</template>

<style lang="less" scoped>
.setting-form {
  width: 687px;

  .el-form-item {
    margin: 15px;
  }

  .el-form-item:last-child {
    text-align: right;
  }
}
</style>
